في الاونة الاخيرة لا بد انك سمعت بشكل كبير عن الـ Design System او كما قمت بتعريبها بنظام التصميم، هذا المصطلح أصبح في كل مكان وكل نشرة بريدية والجميع يتكلم عنه، إذاً ما هو نظام التصميم؟ لماذا الجميع يتكلم عنه؟ لماذا يجب بناء نظام تصميم ومتى يجب علي استعماله؟ دعنا في هذا المقال ناخذ كل سؤال على حدا.
سوف اتكلم في هذا المقال من منظور شخصي عن نظام التصميم ومن خبرتي في تطبيقه في الشركة التي اعمل بها حاليا على منتجاتها التي تستعمل من قبل الملايين المكونة من ثقافات مختلفة (اتراك، عرب، وعالمي).
نظام التصميم ليس بالشيء الجديد، لكن الجديد به هو كيفية تطبيقه على اعمالنا ومشاريعنا، ونظام التصمم الذي نتحدث عنه اليوم هو مخصص لتصميم المنتجات الرقمية كالمواقع، تطبيقات الموبايل، الساعات الذكية والخ…
وايضا هو يلامس أي شخص يعمل في التصميم الرقمي (digital design) مثل مصممين تجربة المستخدم (user experience) ومطورين الواجهات الامامية (front-end developer).
إذا ما هو نظام التصميم (Design System)؟
نظام التصميم هو عبارة عن مجموعة من العناصر (Components) التي يمكنك دمجها بعدة طرق للحصول على شكل معين، وهو الذي يساعد الشركات على ادارة التصميم الخاص بها عند التوسع والتضخم.
سوف نأخذ بعض الامثلة العملية لتوضيح نظام التصميم
المثال الأول: أحجار الـ LEGO:
تخيل أن لديك 20 حجر من قطع الـ LEGO، هل يمكنك أن تتخيل عدد الطرق التي يمكن تركيبها بها؟ صحيح هناك العديد من الطرق التي يمكننا أن نرتب هذه الأحجار بها لنحصل على نتائج مختلفة.
ونظام التصميم مشابه جدا لاحجار الـ LEGO تخيل أن كل حجر منها يمثل عنصر (Component) له معاييره الاساسية كالون والشكل والحجم يمكننا تركيب هذه العناصر مع بعضها البعض لنخرج بنتيجة معينة، ويمكن استخدام هذه الأحجار في عدة امكان لنخرج بنتائج جديدة والهدف من نظام التصميم بناء عناصر قابلة لإعادة الاستخدام في عدة أماكن، حيث تكون جميع هذه العناصر هي جزء من هذه العائلة مثل أحجار الـ LEGO تماماً.
المثال الثاني ليكن عملياً أكثر: البطاقة
تخيل أن لديك منتج مثل تطبيق موبايل او موقع الكتروني وفي هذا المنتج لديك بطاقة (Card) لها صورة، عنوان، فقرة وزر (Call To Action) مثل اقرأ المزيد او أضف الى السلة، يجب عليك اعتبار هذا العنصر كعنصر مستقل لوحده له كيانه الخاص، فهو يملك مظهره والوانه الخاصة ويمكن أن يستعمل في عدة أماكن وعددها حالات، مثل عناصر المدونة، منتجات المتجر، ففي حقيقة الأمر جميع هذه العناصر سوف تحتوي على صورة وعنوان وزر.
توضيح المثال أكثر اطلع على هذه الصورة كيف يمكننا إعادة استخدام هذه البطاقة في عدة أمكان:
كما نلاحظ في الصورة ان لدينا عنصر قمنا باستخدامه في عدة أماكن فقط قمنا بحذف العناصر الغير مرغوب بها، هذه العملية سوف تسهل على الفريق العمل من مصممين ومطورين بناء أي صفحة جديدة بسهولة، فريق العمل يقوم ببناء مكتبة العناصر بشكل كامل وبعدها يقوم بترتيب هذه العناصر داخل صفحة مثل احجار الـ LEGO تماماً
مثال آخر سوف اعرضه قمت ببنائه لتقديمه في احد الاجتماعات للمسولين في الشركة التي اعمل بها لتوضيح أهمية واليه عمل نظام التصميم، حيث يمكننا بناء بطاقة (Card) واحدة واعادة استخدمها كـ خبر، فيديو، او اعلان او رأي كاتب.
لماذا يجب عليك استخدام وتطبيق نظام التصميم؟
أولاً: نظام التصميم يساعدك على توفير الوقت والمال!
من الطبيعي ان تشعر ان نظام التصميم اضافة زائدة عليك، لكن في حقيقة الامر التصميم تساعدك على زيادة كفاءة عملك.
لفهم كيفية تطبيق هذا الأمر بشكل أفضل، ضع في اعتبارك هذه الأسئلة:
- النمو Scale – هل تقوم بتصميم منتج أو منتجات تحتوي على اكثر من 200 صفحة؟ هل منتجاتك تنمو وتتوسع بشكل ملحوظ؟
- التناغم Consistency – هل تريد منتجاتك ان تظهر بشكل متناغم، هوية موحدة وتجربة استخدام واحدة؟ هل في منتجاتك حاليا يوجد اكثر من 20 مظهر ونمط مختلف للازرار؟!
- الكفاءة Efficiency – هل تريد مصممي واجهات المستخدم (UI)، مصممي تجربة الاستخدام (UX) ومطوري واجهات المستخدم (Front-End Developers) العمل بشكل أسرع وتوفير الوقت والجهد؟
- العمل الجماعي Teamwork – هل لديك العديد من المصممين يعملون على نفس المشروع معاً؟
ان كان الجواب “نعم” لهذه الاسئلة او لإحداهما، فنظام التصميم هو الحل الأمثل لك، اعمل دائما بشكل قابل للتوسع، وزيادة الكفاءة والتناغم هما أكبر الفوائد لإنشاء واستخدام نظام التصميم.
يمكنك استخدمها عندما تعرض في اجتماعك القادم على مجلس الادارة في المؤسسة او الشركة التي تعمل بها لماذا يجب استخدام نظام التصميم.
اضافتاً، عندما تعيد استخدام العناصر (Components) في نظام التصميم الخاص بك، مع الوقت سوف تتخلص من عملية الإنشاء سوف يصبح الامر روتيني كتركيب احجار الـ LEGO، عندما تصل الى هذه المرحلة، فريق التصميم والتطوير لديك سيتمكن من التركيز بشكل أكبر على المنتجات الموجودة لديك، والتحسين من تجربة الاستخدام لهذه العناصر، أو العمل على مشاريع جديدة تماماً!
ثانياً: نظم التصميم هي المستقبل!
الان جميع الشركات العالمية تتوجه الى استخدام نظم التصميم لان نظم التصميم سوف تعطينا الأريحية والمرونة التي نحتاجها للعمل مع الاجهزة الغير معروفة في المستقبل، تخيل ان منتجك الان يعمل كموقع ويب أو كتطبيق موبايل، وفي المستقبل سوف يتوفر على احد منصات التلفاز الذكية (Smart TV)، لن تكون هذه مشكلة ان كنت قد بنيت منتجك كنظام تصميم، فسوف تقوم باستخدام لغة التصميم (Design Language) نفسها وسوف تحمل تجربة الاستخدام نفسها.
أمثلة لنظم التصميم
يوجد العديد من نظم التصميم لشركات عالمية مثل Shopify، Microsoft، Google متواجدة على الانترنت يمكنك الاطلاع عليها وعلى عناصرها ويمكنك استخدامها ايضا!
- Base الخاص بشركة ببيانات
- Harmony الخاص بـ Intuit
- GEL – Global Experience Language الخاص بـ BBC
- Material الخاص بـ Google
- Lightning الخاص بـ Salesforce
- AirBNB’s Visual Language
- Joystick الخاص بـ EA
- Fluent الخاص بـ Microsoft
- Plasma الخاص بـ WeWork
- Polaris الخاص بـ Shopify
- Lonely Planet
- Swarm الخاص بـ Meetup
- Canvas الخاص بـ Hubspot
بعض نظم التصميم الخاصة بجهات حكومية
- US Government Design Standards
- USPTO UI Design Library
- USA Jobs Design System
- State of California
- Bristol City Council
- City of Philadelphia
- Australian Government
الخلاصة:
دعني الان اتكلم عن تجربتي الشخصية والعملية في بناء نظام التصميم.
قد يكون نظام التصميم امر مفيد جدا لأي مشروع أو منتج قابل للتوسع في المستقبل.
لكن بناء نظام التصميم امر متعب جدا ويتطلب الكثير من الوقت في بداية الأمر ويجب عليك دراسة المشروع جيدا وتحليل جميع العناصر الاساسية التي من المحتمل ان تسخدمها، ان كنت تعمل في شركة لا تقدر اهمية نظام التصميم واهمية الوقت المطلوب في الفترة الاولى انصحك ان لا تبدأ به فهذا النوع من الشركات يهتم جدا برؤية التصميم امامه ولا يهتم الى الطريقة او بعبارة اخرى: لماذا لم تقم بتصميم اي شئ طول الشهر الماضي؟ للأسف قد تسمع هذا السؤال.
وايضا ان كنت تعمل بشكل مستقل على مشاريع صغيرة صدقني لا داعي لقضاء وقت كبير في بناء نظام التصميم لان هذا النوع من المنتجات غالبا ما يتوسع، وهناك احتمال كبير ان يطور التصميم من قبل شخص آخر.
واخيرا وليس اخرا، ان كنت مصمم منتجات او واجهات مستخدم او مطور ويب، يجب عليك الاطلاع والتعرف أكثر على نظام التصميم لأنه يضم جميع أعضاء الفريق من مصممين ومطورين للعمل معا وفق منهج واحد.
ان اردت التعرف اكثر على نظام التصميم انصحك بـ (Design Systems Handbook).
كتاب خفيف ان كنت تريد الإطلاع على المفاهيم الأساسية المتعلقة بنظام التصميم (Design System) وكيفية بناء نظام قابل للتوسع (Scalable)، حيث أن الكتاب يتناول جميع المفاهيم المتعلقة بإنشاء النظام من التخطيط والتصميم الى البناء.
اشارك عبر حسابي في الانستجرام أمور متعلقة بالتصميم والمشاريع الناشئة، إن كنت من المهتمين يمكنك متابعتى دوما @hussam3bd
